<template>
	<view class='table '>
		<view class='uni-flex uni-row '
			style="-webkit-justify-content: space-between;justify-content: space-between;">
			<view class='uni-flex uni-row'>
				<view class="showcolumns">
					<button class=" text" type="primary" plain @click="showColumns = !showColumns">显示列</button>
					<view v-if="showColumns" class="mask" @click="showColumns = false"></view>
					<view v-if="showColumns" class="options-modal">
						<view class="options" >
							<checkbox-group @change="checkboxChanged" >
							<view class='checkbox' v-for="(filed, index) in fileds" :key="index">								
								<checkbox :value="filed.value" :checked="filed.show"  />
								<text>{{ filed.text }}</text>
							</view>
							</checkbox-group>
						</view>
						<button @click="showColsClicked">确定</button>
					</view>

				</view>

			</view>
		</view>
		<scroll-view scroll-y  style="height:750rpx;">
		<uni-table class='table-container' border stripe emptyText="暂无更多数据" type="selection">
			<!-- 表头行 -->
			<uni-tr>
					
				<template  v-for="(filed, index) in fileds" :key="index">
					<uni-th  v-if='filed.show' class='th'  align="center">{{filed.text}}</uni-th>
				</template>
				
				<uni-th class='th' align="center">操作</uni-th>

			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, index) in data" :key="index">
				<template  v-for="(filed, index) in fileds" :key="filed.value">
					<uni-td class='td' align="center"  v-if='filed.show'  >{{ item[filed.value] }}</uni-td>
				</template>
				
				<uni-td class='td' align="center">
					<!-- 这里可以添加操作按钮等 -->
					<view class="uni-group">
						<button class="uni-button" size="mini" type="primary">修改</button>
						<button class="uni-button" size="mini" type="primary">查看</button>
						<button class="uni-button" size="mini" type="warn">删除</button>
					</view>
				</uni-td>


			</uni-tr>


		</uni-table>
		</scroll-view>
		<uni-pagination title="标题文字" showPageSize show-icon="true" :total="tableParams.total_count" 
		:current="tableParams.page" :pageSize="tableParams.limit" 
		@pageSizeChange='pageSizeChange' @change="currentIndexChange"></uni-pagination>
		
	</view>
</template>

<script setup>
	import {ref,computed,onMounted} from "vue"
	import store from "@/store/index.js"
	import { onReady } from '@dcloudio/uni-app'
	const props = defineProps({
		fileds: {
			type: Object,
			required: true,
			default () {
				return []
			}
		},
		data: {
			type: Object,
			required: true,
			default () {
				return []
			}
		},
		tableParams: {
			type: Object,
			required: true,
			default () {
				return {page:1,limit:10}
			}
		},
	})
	const emit = defineEmits(['showColsChanged','pageSizeChange','currentIndexChange'])
	
	let tempcolsvalue=[]
	onMounted(()=>{
		console.log(1233,props.fileds)
	})
	const showColumns = ref(false);
	const showColsClicked=()=>{
		showColumns.value = false		
		
		emit('showColsChanged', tempcolsvalue)
		
	}
	const checkboxChanged=(e)=>{		
		tempcolsvalue=e.detail.value
	}
	const pageSizeChange=(e)=>{
		emit('pageSizeChange', e)
	}
	const currentIndexChange=(e)=>{
		emit('currentIndexChange', e)
	}
</script>

<style lang="scss" scoped>
	.table {
		max-width: 2300rpx;
		
		
	}

	.table-container {
		position: relative;
		width: 100%;
		border-collapse: collapse;
		
		.uni-group {
			display: flex;
			flex-direction: row;
			max-width: 380rpx;
			justify-content: center;
			.uni-button {
				padding:0 5px;
				margin: 10rpx 15rpx ;
				
			}
		}

		// 操作列样式
		.th:last-child,
		.td:last-child {
			
			margin: 0,0rpx;
			position: sticky;
			right: 0;
			background-color: white;
			z-index: 1; // 确保操作列显示在最上层
		}
	}

	.showcolumns {
		position: relative;
		.options {
			display: flex;
			flex-direction: column;
		}
		.text{
			padding: 0 5rpx;
			margin: 15rpx 5rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 26rpx;
		}
		
		.options-modal {
			position: absolute;
			//top: 0;
			left: 0;
			//transform: translate(-50%, -50%);
			background-color: white;
			padding: 20px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			z-index: 999 !important;
			min-width: 400rpx;
			.options  {
				margin-bottom: 10px;
				.checkbox{					
					margin-bottom: 10rpx;
				}
			}
		}
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 998;
		}
	}

	

	
</style>